<template>
  <div class="faultList">
    <div class="header">
      <div class="input-item">
        <label>搜索：</label>
        <a-input class="input-style" placeholder="设备名称/IP地址" />
      </div>
      <div class="input-item">
        <label>发生日期：</label>
        <a-date-picker class="input-style" placeholder="请选择发生日期" format="YYYY-MM-DD" />
      </div>

      <div class="input-item">
        <label>严重性：</label>
        <a-select class="input-style" default-value="lucy">
          <a-select-option value="jack">
            一般
          </a-select-option>
          <a-select-option value="lucy">
            警告
          </a-select-option>
          <a-select-option value="disabled" disabled>
            故障
          </a-select-option>
        </a-select>
      </div>

      <div class="input-item">
        <label>故障状态：</label>
        <a-select class="input-style" default-value="lucy">
          <a-select-option value="jack">
            已解决
          </a-select-option>
          <a-select-option value="lucy">
            未解决
          </a-select-option>
          <a-select-option value="disabled" disabled>
            已恢复
          </a-select-option>
        </a-select>
      </div>

      <div class="header-buttons">
        <a-button type="primary" style="margin-right:24px">
          搜索
        </a-button>
        <a-button>重置</a-button>
      </div>
    </div>
    <div class="content">
      <a-table class="table-style" :columns="columns" :data-source="data">
        <a slot="name" slot-scope="text">{{ text }}</a>
      </a-table>
    </div>
  </div>
</template>


<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '设备名称',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: 'IP地址',
    dataIndex: 'address',
    key: 'address 1',
    ellipsis: true,
  },
  {
    title: '发生时间',
    dataIndex: 'address',
    key: 'address 2',
    ellipsis: true,
  },
  {
    title: '严重性',
    dataIndex: 'address',
    key: 'address 6',
    ellipsis: true,
  },
  {
    title: '故障说明',
    dataIndex: 'address',
    key: 'address 7',
    ellipsis: true,
  },
  {
    title: '持续时间',
    dataIndex: 'address',
    key: 'address 8',
    ellipsis: true,
  },
  {
    title: '状态',
    dataIndex: 'address',
    key: 'address 9',
    ellipsis: true,
  },
  {
    title: '操作',
    dataIndex: 'address',
    key: 'address 10',
    ellipsis: true,
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];
export default {
  data () {
    return {
      currentPage: 1,
      pageSize: 10,
      data,
      columns,
    };
  },
}
</script>


<style lang="less" scoped>
.faultList {
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    padding: 24px 24px 24px 8px;
    background: #fff;
    height: 76px;
    display: flex;
    .input-item {
      margin: 0px 8px 0px 24px;
      .input-style {
        width: 220px;
      }
    }
    .header-buttons {
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }
  }

  .content {
    padding: 24px 24px 0px 24px;
    flex: 1;
    margin-top: 24px;
    background: #fff;
  }
}
</style>